<template>
    <view class="container">
        <!-- 列表页 -->
        <view class="card-list">
            <view
                    class="card"
                    v-for="(item, index) in siteInfo"
                    :key="index"
                    @click="goOperateDetails(item.id)"
            >
                <view class="list-item">
                    <view class="status-container">
                        <div>{{ item.name1}}</div>
                        <u-icon
                                name="arrow-right"
                                size="16"
                                color="#C0C0C0"
                                class="arrow-icon"
                        ></u-icon>
                    </view>
                </view>
                <view class="list-item1">
                    <text>{{ item.name2 }}</text>
                    <text>{{ item.name3 }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
  export default {
    data() {
      return {
        siteInfo: [
          {
            id: 1,
            name1: '青年路客运站-黄山市综合客运站1',
            name2: '普通',
            name3: '营运'
          },
          {
            id: 2,
            name1: '青年路客运站-黄山市综合客运站2',
            name2: '普通',
            name3: '营运'
          },
          {
            id: 3,
            name1: '青年路客运站-黄山市综合客运站3',
            name2: '普通',
            name3: '营运'
          }
        ]
      };
    },
    methods: {
      // 其他方法
      goOperateDetails(id) {
        uni.redirectTo({
          url: "/pages/hub_ygzw/route/routeQuery/siteQueryDetails?id=" + id,
        });
      },
    },
  };
</script>

<style scoped lang="scss">
    .container {
        background-color: #f3f6fa;
        height: 100vh;
        width: 100%;
    }

    .card-list {
        padding: 10px;

        .card {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin-bottom: 10px;
            padding: 20px;

            .list-item {
                display: flex;

                .status-container {
                    display: flex;
                    align-items: center;
                    white-space: nowrap; /* 防止换行 */
                    .arrow-icon {
                        margin-left: 5px;
                    }
                }
            }

            .list-item1 {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 10px;
                height: 32px;
                background: #fafafb;
                border-radius: 3px;
            }
        }
    }
</style>
